.dashboard {
  padding: 24px;
  background: #f5f7fa;
  min-height: 90vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  &-top {
    width: 100%;
    height: 430px;
    background: #fff;
  }
  .dashboard-info {
    width: 100%;
    height: 100%;
    .info-title {
      width: 100%;
      height: 60px;
      padding-left: 16px;
      border-bottom: 1px solid #f2f2f2;
      .title-line {
        color: #2396eb;
        height: 60px;
        width: 100px;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        border-bottom: 1px solid #2396eb;
      }
    }
    .info-content {
      display: flex;
      width: 100%;
      height: calc(100% - 60px);
      // gap: 24px;
      padding: 20px;
      .chart-title {
        font-size: 18px;
        font-weight: bold;
        padding: 16px 0;
      }
      .item-content {
        width: 100%;
        height: calc(100% - 57px);
        overflow-y: auto;
        // 隐藏滚动条
        &::-webkit-scrollbar {
          display: none;
        }
      }
      .info-left {
        flex: 1;
        height: 100%;
      }
      .info-right {
        width: 300px;
        height: 100%;
        .list-item {       
          display: flex;
          padding: 10px 0;
          align-items: center;
          justify-content: space-between;
          &:nth-child(-n + 3) {
            .item-no{
              background: #2396eb;
              border-radius: 100%;
              color: #fff;
            }
          }
          .item-no {
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
          }
          .item-info {    
            flex: 1;
            padding: 0 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  &-bottom {
    display: flex;
    gap: 24px;
    width: 100%;
    .bottom-left,.bottom-right {
      width: 50%;
      height: 360px;
      background: #fff;
    }
    .bottom-right {
      .chart {
        width: 100%;
        height: calc(100% - 40px);
      }
    }
    .bottom-left {
      .chart-title {
        display: flex;
        gap: 24px;
        padding-top: 10px;
        .title-item {
          p {
            margin: 0;
            padding: 0;
            color: #adb6ba;
            padding-bottom: 8px;
          }
          span {
            font-size: 20px;
            color: #292828;
          }
        }
      }
      .chart {
        width: 100%;
        height: calc(100% - 70px);
      }
    }
  }
}